<template>
  <div class="bigdiv">
    <!-- 轮播图 -->
    <swiper class="brand" indicator-dots="true" autoplay="true" interval="2000">
      <block v-for="(item,index) in swiperList" :key="index">
        <swiper-item class="swiper-item">
          <image mode="scaleToFill" :src="item.url" />
        </swiper-item>
      </block>
    </swiper>
    <ul class="ulone">
      <li>
        <p>60</p>
        <p>已报名</p>
      </li>
      <li>
        <p>60</p>
        <p>已报名</p>
      </li>
      <li>
        <p>60</p>
        <p>已报名</p>
      </li>
    </ul>
    <div class="divnoe">
      <p class="pbq" @click="goList">我要报名</p>
    </div>
    <div class="divtow">
      <p class="pbqtow">距离活动结束时间 {{countDownList}}</p>
    </div>
    <ul class="ul-big">
      <li>
        <input type="text" placeholder="请输入..." name id value="姓名" />
      </li>
      <li>搜索</li>
    </ul>
    <ul class="ul-tow">
      <picker
        class="pickernoe"
        mode="selector"
        @change="changeNextCol"
        :index="index"
        :range="array"
      >
        <view class="picker">{{array[index]}}</view>
      </picker>
    </ul>
    <ul class="ul-s">
      <li>列表</li>
      <li>关注</li>
      <li>客服</li>
    </ul>
    <div class="content" @click="golist">
      <ul>
        <li v-for="(item,index) in contentList" :key="index">
          <img :src="item.url" alt />
          <p>{{item.num}}票</p>
          <p>{{item.name}}</p>
          <p>投票</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      countDownList: "00天00时00分00秒",
      actEndTime: "2020-11-30 00:00:00",
      array: ["选择分组", "分组一", "分钟二"],
      index: 0,
      swiperList: [
        {
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534136662314&di=af7ec227db5e118a5626a94ab97026f3&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F4bed2e738bd4b31ccda81d7a8bd6277f9f2ff85f.jpg"
        },
        {
          url:
            "https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=4b22ec31ddc8a786a12a4c0e5708c9c7/5bafa40f4bfbfbedc5597ab474f0f736aec31ffc.jpg"
        },
        {
          url:
            "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=87d6daed02f41bd5c553eef461d881a0/f9198618367adab4b025268587d4b31c8601e47b.jpg"
        }
      ],
      contentList: [
        {
          url: "../../assets/images/brand1.png",
          name: "张三",
          num: 123
        },
        {
          url: "../../assets/images/brand2.png",
          name: "李四",
          num: 12345
        },
        {
          url: "../../assets/images/brand3.png",
          name: "王五",
          num: 12356
        }
      ]
    };
  },
  computed: {},
  created() {
    this.countDown();
  },
  mounted() {},
  watch: {},
  methods: {
    changeNextCol: function(e) {
      // console.log('picker发送选择改变，携带值为', e.mp.detail.value)
      this.index = e.mp.detail.value;
    },
    goList() {
      console.log(1);
      const url = "../vote/main";
      mpvue.navigateTo({ url });
    },
    golist() {
      const url = "../list/main";
      mpvue.navigateTo({ url });
    },
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },
    countDown(it) {
      var interval = setInterval(() => {
        // 获取当前时间，同时得到活动结束时间数组
        let newTime = new Date().getTime(); // 对结束时间进行处理渲染到页面
        let endTime = new Date(this.actEndTime).getTime();
        let obj = null; // 如果活动未结束，对时间进行处理
        if (endTime - newTime > 0) {
          let time = (endTime - newTime) / 1000; // 获取天、时、分、秒
          let day = parseInt(time / (60 * 60 * 24));
          let hou = parseInt((time % (60 * 60 * 24)) / 3600);
          let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
          let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
          obj = {
            day: this.timeFormat(day),
            hou: this.timeFormat(hou),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          };
        } else {
          // 活动已结束，全部设置为'00'
          obj = {
            day: "00",
            hou: "00",
            min: "00",
            sec: "00"
          };
          clearInterval(interval);
        }
        this.countDownList =
          obj.day + "天" + obj.hou + "时" + obj.min + "分" + obj.sec + "秒";
      }, 1000);
    }
  },
  components: {}
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: black;
}
.bigdiv {
  background-color: #eeeeee;
}
.brand {
  width: 100%;
}
.swiper-item {
  width: 100%;
}
.swiper-item image {
  width: 100%;
}
.ulone {
  background-color: #31c9b1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 20px 10px 0 10px;
  border-radius: 15px;
}
.ulone li {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: wheat;
  font-size: 14px;
  font-weight: 600;
}
.divnoe {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-top: 20px;
}
.pbq {
  border-radius: 15px;
  background-color: #31c9b1;
  width: 60%;
  height: 40px;
  text-align: center;
  line-height: 44px;
  color: aliceblue;
  font-weight: 600;
}
.divtow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-top: 20px;
}
.pbqtow {
  border-radius: 10px;
  background-color: rgb(211, 211, 211);
  width: 90%;
  height: 40px;
  text-align: center;
  line-height: 44px;
  color: aliceblue;
  font-weight: 400;
}
.ul-big {
  display: flex;
  height: 40px;
  margin: 0 10px;
}
.ul-big li:nth-child(1) {
  flex: 7;
  background-color: white;
  color: blue;
}
.ul-big li:nth-child(2) {
  flex: 3;
  background-color: #31c9b1;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
}
.ul-tow {
  margin-top: 20px;
}
.ul-tow .picker {
  background-color: #31c9b1;
  text-align: center;
  line-height: 40px;
  width: 50%;
  color: white;
  font-weight: 600;
}
.ul-s {
  position: fixed;
  top: 430px;
}
.ul-s li {
  width: 50px;
  height: 50px;
  background-color: #f6ffff;
  color: rgb(161, 161, 161);
  text-align: center;
  line-height: 50px;
  margin: 5px;
}
.content ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.content ul li {
  /* border: 1px solid red; */
  width: 40%;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  padding: 5px;
  margin: 10px;
  background-color: white;
  height: 200px;
}
.content ul li p {
  margin-top: 5px;
}
.content ul li p:nth-child(1) {
  color: rgb(146, 146, 146);
}
.content ul li p:nth-child(2) {
  color: rgb(81, 69, 252);
}
.content ul li p:nth-child(4) {
  width: 90%;
  background-color: blue;
  color: #eeeeee;
  font-weight: 600;
  text-align: center;
  margin-left: 10px;
}

.content ul li img {
  width: 100%;
}
.content ul li p {
  color: black;
}
</style>
